<template>
  <view>
    <!-- 我的 -->
    <view class="top d_flex_b">
      <view class="avatar">
        <!-- #ifdef MP-WEIXIN -->
        <image
          v-if="userInfo.avatarUrl"
          :src="userInfo.avatarUrl"
          mode=""
          @error="errorAvatar"
        ></image>
        <!-- #endif -->
        <!-- #ifdef MP-TOUTIAO -->
        <image v-if="userInfo.avatarUrl" src="/static/5.png" mode=""></image>
        <!-- #endif -->
        <image v-else src="/static/5.png" mode=""></image>
      </view>
      <view class="info flex1">
        <view class="name">{{ userInfo.nickName || "未登录" }}</view>
        <view class="id pt-20">ID：{{ userInfo.id || "" }}</view>
      </view>
      <view class="edit d_flex_c" @click="edit">
        <image src="/static/edit.png" mode=""></image>
        <text>编辑资料</text>
      </view>
    </view>
    <view class="item-box">
      <view class="item d_flex_b" @click="toCollect">
        <image src="/static/c1.png" mode=""></image>
        <view class="name flex1">我的收藏</view>
        <u-icon name="arrow-right" size="15" color="#BBBFCD"></u-icon>
      </view>
      <!-- <view class="item d_flex_b">
				<view class=" val2 one">我的收</view>
				<view class="">我的收藏211</view>
			</view>
			<view class="item d_flex_b">
				<view class=" val2 one">我藏</view>
				<view class="">我的收藏211</view>
			</view> -->

      <!-- 	<view class="item d_flex_b" @click="open">
				<image src="/static/c2.png" mode=""></image>
				<view class="name flex1">背词计划</view>
				<view class="val">{{num}}个词</view>
				<u-icon name="arrow-right" size="15" color="#BBBFCD"></u-icon>
			</view> -->

      <!-- 	<view class="item d_flex_b" @click="open1">
				<image src="/static/c3.png" mode=""></image>
				<view class="name flex1">跟读发音</view>
				<view class="val">{{type}}</view>
				<u-icon name="arrow-right" size="15" color="#BBBFCD"></u-icon>
			</view> -->
    </view>
    <view class="gd_px-30">
      <MoreUtil code="word"></MoreUtil>
    </view>
    <!--
		<button class="btn gd_mt-20" @click="logout">退出登录</button>
    -->
    <uni-popup ref="popup" type="bottom" :safe-area="false">
      <view class="pop-box">
        <view class="tit">调整每日背词计划</view>
        <view class="picker">
          <picker-view
            :indicator-style="indicatorStyle"
            :value="value"
            @change="bindChange"
            class="picker-view"
          >
            <picker-view-column>
              <view class="item" v-for="(item, index) in numbers" :key="index"
                >{{ item }}个词</view
              >
            </picker-view-column>
          </picker-view>
        </view>
        <view class="save">
          <view class="btn" @click="saveSet">保存设置</view>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="typePop" type="bottom" :safe-area="false">
      <view class="type-pop">
        <view class="item" @click="saveType('美音')">美音</view>
        <view class="item" @click="saveType('英音')">英音</view>
        <view class="cancel" @click="close1">取消</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import MoreUtil from "@/lib-mobile/biz-components/MoreUtil/MoreUtil.vue";

export default {
  components: {
    MoreUtil,
  },
  data() {
    return {
      numbers: [30, 50, 60, 80, 100, 150, 200],
      value: "",
      num: 30,
      type: "美音",
      indicatorStyle: `height: 90rpx;`,
      userInfo: {},
      userMoreData: "",
    };
  },
  onLoad() {
    // if (!uni.getStorageSync('tokenValue')) {
    // 	uni.showToast({
    // 		title: '未登录，请先进行登录',
    // 		icon: 'none'
    // 	});
    // 	setTimeout(() => {
    // 		uni.navigateTo({
    // 			url: '/pages/login/login'
    // 		})
    // 	}, 1500)
    // 	return;
    // }

    if (!uni.getStorageSync("tokenValue")) {
      this.getUserinfo();
    }
  },
  onShow() {
    this.num =
      this.userInfo.dayWordNum || uni.getStorageSync("dayWordNum") || 30;
    if (uni.getStorageSync("tokenValue")) {
      this.getUserinfo();
    }
  },
  methods: {
    getUserinfo() {
      this.$http.get1("/qh/user/info").then((res) => {
        if (res.code == 200) {
          this.userInfo = res.data.user;
          this.userMoreData = res.data;
          this.num = this.userMoreData.dayWordNum || 30;
          this.value = [this.numbers.findIndex((v) => v == this.num)];
          uni.setStorageSync("userInfo", this.userInfo);
          uni.setStorageSync("userMoreData", this.userMoreData);
        }
      });
    },
    toSetting() {
      uni.navigateTo({
        url: "/pages/setting/setting",
      });
    },
    toCollect() {
      uni.navigateTo({
        url: "/pages/collect/collect",
      });
    },
    edit() {
      uni.navigateTo({
        url: "/pages/mine/edit",
      });
    },
    open() {
      this.$refs.popup.open();
    },
    close() {
      this.$refs.popup.close();
    },
    bindChange(e) {
      this.value = e.detail.value;
    },
    saveSet() {
      this.num = this.numbers[this.value[0]] || 30;
      this.$http
        .post("/api/client/word/updateWordMyPain", {
          dayWordNum: this.num,
        })
        .then((res) => {
          if (res.code == 200) {
            uni.setStorageSync("dayWordNum", this.num);
            uni.showToast({
              title: "修改成功",
            });
            this.close();
          } else {
            uni.showToast({
              title: res.message,
              icon: "none",
            });
          }
        });
    },
    open1() {
      this.$refs.typePop.open();
    },
    close1() {
      this.$refs.typePop.close();
    },
    errorAvatar(e) {
      console.log("errorAvatar", e);
    },
    saveType(item) {
      this.type = item;
      this.close1();
    },
    logout() {
      uni.removeStorageSync("userInfo");
      uni.removeStorageSync("tokenValue");
      uni.clearStorageSync();
      uni.reLaunch({
        url: "/pages/login/login",
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}

.top {
  background-color: $theme;
  padding: 40rpx 32rpx 30rpx;
  color: #fff;

  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 30rpx;

    image {
      width: 100%;
      height: 100%;
      border: 4rpx solid #eaeaea;
      border-radius: 50%;
    }
  }

  .info {
    width: 300rpx;
    margin-right: 30rpx;
  }

  .name {
    width: 100%;
    font-size: 36rpx;
    font-weight: bold;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .id {
    font-size: 28rpx;
  }

  .edit {
    position: relative;
    top: -20rpx;
    font-size: 24rpx;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }
  }
}

.item-box {
  width: 690rpx;
  margin: 30rpx auto;
  background-color: #fff;
  border-radius: 18rpx;
  padding: 0 30rpx;
  box-sizing: border-box;

  .item {
    position: relative;
    height: 124rpx;
    box-sizing: border-box;
    border-bottom: 1rpx solid #e4e5ec;

    .name {
      flex: 1;
      text-align: left;
      padding: 0 30rpx;
      box-sizing: border-box;
    }

    .val2 {
      position: absolute;
      // float: left;
      top: 0rpx;
      display: inline-block;
      height: 80rpx;
      line-height: 80rpx;
      min-width: 120rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: #666666;
      text-align: justify;
      border: 1rpx solid;
      // &::after{
      // 	width: 100%;
      // 	display: inline-block;
      // 	content: '';
      // }
    }

    .one::after {
      display: inline-block;
      content: "";
      width: 100%;
      // height: 0;
      // overflow: hidden;
      // padding-left: 100%;
    }

    image {
      width: 48rpx;
      height: 48rpx;
      margin-right: 20rpx;
    }

    &:last-child {
      border-bottom: none;
    }
  }
}

.btn {
  width: 686rpx;
  height: 124rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 4rpx 2rpx rgba(42, 65, 152, 0.1);
  border-radius: 20rpx;
  font-size: 32rpx;
  font-weight: bold;
  line-height: 124rpx;
  color: #575a64;
  border: none;

  &::after {
    outline: none;
    border: none;
  }
}

.pop-box {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;

  .tit {
    height: 120rpx;
    text-align: center;
    line-height: 120rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
  }

  .picker-view {
    height: 300rpx;

    .item {
      border: none;
      color: #5480f8;
      background-color: #f5f8ff;
      font-size: 32rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .save {
    width: 100%;
    height: 124rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
      margin: 0 auto;
      width: 626rpx;
      height: 90rpx;
      background: #5480f8;
      border-radius: 46rpx;
      text-align: center;
      line-height: 90rpx;
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
    }
  }
}

.type-pop {
  width: 100%;
  border-radius: 20rpx 20rpx 0 0;
  background-color: #fff;

  .item {
    height: 124rpx;
    text-align: center;
    line-height: 124rpx;
    font-size: 32rpx;
    color: #575a64;
    border-bottom: 1rpx solid #f2f3f8;
  }

  .cancel {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    height: 150rpx;
    text-align: center;
    line-height: 150rpx;
    border-top: 10rpx solid #f2f3f8;
  }
}

.more-util {
  border-radius: 18rpx;
}
</style>
